<!--
 * steps子容器
 * @param title  标题
 * @param status  状态
 * @param inactiveColor  未激活状态颜色
 * @param activeColor  激活状态颜色 
 * @param finishColor  已完成状态眼色 
 * @param inactiveIcon  未激活状态图标 
 * @param activeIcon  激活状态图标 
 * @param finishIcon  已完成状态图标 
 * @example  <steps v-model="status" direction="`horizontal`" background="`var(--prev-bg-white)`" @click-step="clickStep">
                <step :title="title" 
                :inactiveColor="inactiveColor" 
                :activeColor="activeColor" 
                :finishColor="finishColor" 
                :inactiveIcon="inactiveIcon" 
                :activeIcon="activeIcon" 
                :finishIcon="finishIcon" />
             </steps>
 * @returns provide 和 inject  选项应该是一个对象或返回一个对象的函数 <实现跨级访问祖先或者多层级组件数据>
-->
<template>
  <div :class="['custom-step__center', currentStatus]"
       @click="stepClick">
    <!-- 图标 -->
    <div :class="'custom-step__head__' + direction">
      <slot name="icon">
        <img :src="currentIcon.icon"
             :class="[
            'custom-status__icon',
            { 'wait-icon': currentStatus === 'inactive' }
          ]" />
        <!-- 线 -->
        <div :class="[
            'custom-step__line',
            { active_horizontal: currentStatus === 'finish' },
            direction
          ]"></div>
      </slot>
    </div>
    <!-- 图标标题 -->
    <slot name="title">
      <div :class="['custom-step__title']"
           :style="{ '--active-color': currentIcon.color }">
        {{ title }}
      </div>
      <!-- 文字--后期添加 -->
    </slot>
  </div>
</template>

<script>
export default {
  name: "sonStep",
  props: {
    title: {
      // 标题
      type: String,
      default: ""
    },
    status: {
      // 当前步骤状态、不设置则用steps来设置
      type: String,
      default: ""
    },
    inactiveColor: {
      // 未激活状态颜色
      type: String,
      default: "var(--prev-border-color-lightgrey)"
    },
    activeColor: {
      // 激活状态颜色
      type: String,
      default: "#333333"
    },
    finishColor: {
      // 已完成状态颜色
      type: String,
      default: "var(--prev-border-color-lightgrey)"
    },
    inactiveIcon: {
      // 未激活状态图标
      type: String
      // default: require('./icons/inactive.png')
    },
    activeIcon: {
      // 激活状态图标
      type: String
      // default: require('./icons/active.png')
    },
    finishIcon: {
      // 已完成状态图标
      type: String
      // default: require('./icons/finish.png')
    },
    description: {
      // 详细描叙
      type: String,
      default: ""
    }
  },

  inject: ["direction", "active"],

  data () {
    return {
      index: -1,
      currentStatus: ""
    };
  },

  computed: {
    currentIcon () {
      const statusMap = {
        inactive: {
          color: this.inactiveColor,
          icon: this.inactiveIcon
        },
        active: {
          color: this.activeColor,
          icon: this.activeIcon
        },
        finish: {
          color: this.finishColor,
          icon: this.finishIcon
        },
        default: {
          color: this.inactiveColor,
          icon: this.inactiveIcon
        }
      };
      return statusMap[this.currentStatus] || statusMap.default;
    }
  },

  mounted () {
    // parent 谨慎使用、不推荐
    this.index = this.$parent.$children.findIndex((e) => e._uid === this._uid);
    this.$watch("$parent.active", (val) => this.updateStatus(val), {
      immediate: true
    });
  },

  methods: {
    updateStatus (parentActive) {
      // 如果传入当前步骤状态则用当前状态
      if (this.status) {
        this.currentStatus = this.status;
        return;
      }
      // 如果当前组件index 与 父组件的active值相等 则是处于 激活状态
      // 如果当前组件index 小于 父组件的active值 则是已完成状态
      // 就如果都不是、默认未完成状态
      if (this.index === parentActive) {
        this.currentStatus = "active";
      } else if (this.index < parentActive) {
        this.currentStatus = "finish";
      } else {
        this.currentStatus = "inactive";
      }
    },

    // 点击step事件
    stepClick () {
      this.$parent.$emit("click-step", this.index);
    }
  }
};
</script>
<style lang="scss" scoped>
.custom-step__title {
  font-size: 14px;
  color: var(--prev-color-text-lightgrey);
}
.custom-step__center {
  flex-basis: 50%;
}
.custom-step__center .custom-step__line {
  position: absolute;
  right: -50%;
  left: 50%;
  height: 1px;
  z-index: 0;
  &.horizontal {
    border-top: 2px solid #cad6ee;
  }
}
.active_horizontal {
  border-top: 2px solid #3d7bed !important;
}
.custom-step__center:last-of-type .custom-step__line {
  display: none;
}
.custom-step__center .custom-step__title {
  text-align: center;
  margin-top: 8px;
  font-weight: 500;
}
.custom-step__center .custom-step__head__horizontal {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
// 动态标题
.inactive,
.active,
.finish {
  & .custom-step__title {
    color: var(--active-color);
  }
}
.custom-status__icon {
  width: 16px;
  height: 16px;
  z-index: 1;
}

.wait-icon {
  padding: 4px;
  box-sizing: border-box;
  z-index: 1;
}
</style>
